import React, { Component, Fragment } from 'react';
import './style.css';
import StockItem from './StockItem';

class Stock extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: '贵州茅台',
      list: ['证券ETF', '中概互联']
    };
  }

  render () {
    return (
      <>
        {/* JSX 内部注释 */}
        <div>
          <input className="stockName" value={this.state.inputValue} onChange={this.inputChange.bind(this)} />
          <button onClick={this.addList.bind(this)}>添加股票</button>
        </div>
        <ul>
          {
            this.state.list.map((item, index) => {
              return (
                // <li
                //   key={index + item}
                //   onClick={this.deleteItem.bind(this, index)}
                // >
                //   {item}
                // </li>
                <StockItem
                  key={index + item}
                  item={item}
                  index={index}
                  deleteItem={this.deleteItem.bind(this)}
                />
              );
            })
          }
        </ul>
      </>
    );
  }

  // 绑定input元素数据
  inputChange (e) {
    console.log(e.target.value);
    this.setState({
      inputValue: e.target.value
    });
  }

  // 增加项目
  addList () {
    this.setState({
      list: [...this.state.list, this.state.inputValue],
      inputValue: ''
    });
  }
  // 删除列表项目
  deleteItem (index) {
    console.log(index);
    let list = this.state.list;
    list.splice(index, 1);
    this.setState({ list: list });
  }
}

export default Stock;
